<ion-view view-title="Register">
  <ion-content class="mycontent">
    <div class="mysmalldiv" style="float: left">
      <input class="smallinput" ng-model="userInfo.firstname" id="register-firstname" placeholder="First Name">
    </div>
    <div class="mysmalldiv" style="float: right">
      <input class="smallinput" ng-model="userInfo.lastname" id="register-lastname" placeholder="Last Name">
    </div>

    <div class="mynomaldiv">
      <input class="nomalinput" ng-model="userInfo.email" id="register-email"  placeholder="Email Address">
    </div>

    <div class="mynomaldiv">
      <div style="width: 50px;height: 48px;line-height:48px;background: #65c178;border-radius: 2px;text-align: center;font-weight: 400;color: #fff;font-size: 18px;display: inline-block">+1</div>
      <input type="number" ng-model="userInfo.phonenumber" class="nomalinput" id="register-phonenumber" style="width: 76%">
    </div>

    <div class="mynomaldiv">
      <input type="password" ng-model="userInfo.password" class="nomalinput" id="register-password" placeholder="Password (min 6 characters)">
    </div>

    <div class="mynomaldiv">
      <input type="password" ng-model="userInfo.password2" class="nomalinput" id="register-password2" placeholder="Confirm Password">
    </div>


    <div class="registerbutton" ng-click="register()">Register</div>
    <div class="divspan" style="color: #666666">
      By logging in or creating an account,you agree to our "<span class="termcolor">Terms of Service</span>" and
      "<span class="termcolor">Privacy Policy</span>".
    </div>







    <style type="text/css">
      .divspan{width: 100%;margin-top: 5px;color: #65c178;font-size: 12px;float: left}
      .termcolor{color: #65c178;border-bottom: 1px solid #65c178}
      .mycontent{width: 80%;margin-left: 10%}
      .mynomaldiv{width: 100%;height: 50px;border-radius: 3px;margin-top: 10px;border:1px solid #cccccc;float: left}
      .mysmalldiv{width: 45%;height: 50px;border-radius: 3px;margin-top: 30px;border:1px solid #cccccc}
      .smallinput{margin-left: 6px;width: 93%;height: 46px;margin-top: 2px;border:0px solid #cccccc;}
      .nomalinput{margin-left: 6px;width: 93%;height: 44px;margin-top: 2px;border:0px solid #cccccc}
      .registerbutton{width: 100%;height: 50px;line-height: 50px;border-radius: 3px;margin-top: 27px;background: #cccccc;text-align: center;color: #fff;float: left;font-size: 16px}
      .tipfont{width: 90%;margin-left: 5%;margin-top: 20px;color: #666666}
      .shadediv{width: 100%;background: #999999;height: {{shadeDivHeight}};opacity: 0.5}
      .shadebuttonok{width: 90%;margin-left: 5%;text-align: center;height: 42px;line-height: 42px;color: #fff;font-size: 16px;background: #65c178;border-radius: 3px;margin-top: 20px}
      .shadebuttonother{width: 90%;margin-left: 5%;height: 45px;line-height:45px;margin-top: 15px;border-radius: 4px;text-align: center;color: #fff}

    </style>
  </ion-content>
  <!--<div class="shadediv">-->
  <!--</div>-->

  <!--<div style="width: 80%;margin-left: 10%;height: 193px;top:165px;background: #fff;position: fixed;border-radius: 4px">-->
    <!--<div class="tipfont">* Invalid email address.</div>-->
    <!--<div class="tipfont">* Invalid phone number.</div>-->
    <!--<div class="tipfont">* Invalid passwords/Passwords mismatch.</div>-->
    <!--<div class="shadebuttonok">Okay,I'd like to try again.</div>-->
  <!--</div>-->


  <!--<div style="width: 80%;margin-left: 10%;height: 232px;top:165px;background: #fff;position: fixed;border-radius: 4px">-->
    <!--<div style="width: 90%;margin-left:5%;margin-top: 20px;font-weight: normal;color: #666666">-->
      <!--This email address is associated with an existing account. If you forgot your password, you may-->
      <!--<span style="color: #65c178;border-bottom: 1px solid #65c178">-->
        <!--reset your password here-->
      <!--</span>.-->
    <!--</div>-->
    <!--<div class="shadebuttonother" style="background: #ffa200">Okay,I'd like to try another one.</div>-->
    <!--<div class="shadebuttonother" style="background: #65c178">Gose back to login page.</div>-->
  <!--</div>-->



</ion-view>
